<template>
	<view class="device-status-container">

		<view class="title">设备状态</view>
		<view class="content">

			<view class="equipment-item" v-for="(item,index) in deviceStatusList" :key="index">
				<image class="cus-img" src="@/static/images/deviceStatus/state-inverter.svg" />
				<view class="right">
					<view class="font">
						<view class="txt">{{item.name}}</view>
						<view class="totalNum">总数: {{item.total}}</view>
					</view>
					<view class="equipmentData">
						<view class="online">
							<text class="iconfont icon-yk_yuanquan_fill"
								style="background-color: #42D068;vertical-align: middle;font-size: 12rpx;"></text>
							正常
							<text class="num">{{item.online}}</text>
						</view>
						<!-- <view class="offline">
							<text class="iconfont icon-yk_yuanquan_fill"
								style="background-color: #CCCCCC;vertical-align: middle;font-size: 12rpx;"></text>
							离线 <text class="num">{{item.offline}}</text>
						</view> -->
						<view class="alarm">
							<text class="iconfont icon-yk_yuanquan_fill"
								style="background-color: #EB2828;vertical-align: middle;font-size: 12rpx;"></text>
							故障 <text class="num">{{item.alarm}}</text>
						</view>
					</view>
				</view>
			</view>


		</view>

	</view>
</template>

<script setup>
	import {
		reqStateStatistics
	} from '@/api/model/photovoltaic'
	import {
		ref,
		onMounted
	} from 'vue'
	const deviceStatusList = ref([{
			name: 'PCS变流器',
			total: 7,
			online: 2,
			alarm: 5

		},
		{
			name: 'BMU电池箱',
			total: 144,
			online: 142,
			alarm: 2

		},
		{
			name: '消防系统',
			total: 10,
			online: 9,
			alarm: 1

		},
		{
			name: '辅助系统',
			total: 4,
			online: 4,
			alarm: 0

		},

	])


	const getData = async () => {
		// let res = await reqStateStatistics()
		// deviceStatusList.value = res.data.data
	}
	onMounted(() => {
		getData()
	})
</script>

<style lang="scss" scoped>
	.device-status-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			height: 76rpx;
			margin-left: 46rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 76rpx;
		}

		.content {
			.equipment-item {
				width: 686rpx;
				height: 84rpx;
				margin-bottom: 40rpx;
				margin-left: 40rpx;

				.cus-img {
					width: 80rpx;
					height: 80rpx;
					float: left;
				}

				.right {
					width: 570rpx;
					height: 84rpx;
					padding-left: 24rpx;
					float: left;

					.font {
						display: flex;

						.txt {
							width: 200rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;


						}

						.totalNum {
							margin-top: 4rpx;
							margin-left: 12rpx;
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}

					.equipmentData {
						width: 600rpx;
						display: flex;

						.online,
						.offline,
						.alarm {
							width: 150rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-right: 46rpx;
							display: flex;
							align-items: center;

							.iconfont {
								width: 18rpx;
								height: 18rpx;
								margin-right: 5rpx;
								border-radius: 50%;
							}

							.num {
								font-size: 28rpx;
								font-family: DINAlternateBold;
								font-weight: bold;
								color: #333333;
								margin-left: 8rpx;
							}
						}
					}

				}
			}
		}
	}
</style>